<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Xslider Demo</title>
<meta name="Keywords" content=" " />
<meta name="Description" content=" " />
<style type="text/css">
body{margin:0 auto;	text-align:center; color:#616161; font: 12px/1.5 arial, \5b8b\4f53;}
ul,p{margin:0; padding:0;}
li{list-style-type:none;}
img{border:0;}
:focus{outline:0;}
h1{color:#000; margin-bottom:30px; font-size:30px;}
h2{color:#000; background-color:#eee; width:540px; margin-left:auto; margin-right:auto; text-align:left; padding-left:5px;}
a:link,a:visited{color:#333; text-decoration:none;}
a:hover{color:#000;}

a.abtn{
	position:absolute;
	top:0px;
	display:block;
	height:264px;
	width:6px;
	overflow:hidden;
	text-indent:-20000px;
	background:url(images/arrow3.gif) 0px center no-repeat;
}
a.aleft{
	left:7px;
}
a.agrayleft{
	cursor:default;
	background-position:-12px center;
}
a.aright{
	right:7px;
	background-position:-6px center;
}
a.agrayright{
	cursor:default;
	background-position:-18px center;
}

.productshow{
	width:745px;
	height:264px;
	position:relative;
	margin:80px auto;
}
.productshow .scrollcontainer{
	width:650px;
	height:264px;
	overflow:hidden;
	position:relative;
	margin:0 auto;
}
.productshow .scrollwraper{
	position:absolute;
	left:0px;
	top:0px;
	width:20000px;
}
.productshow .scrollcontainer ul{
	width:650px;
	height:264px;
	float:left;
}
.productshow .scrollcontainer li{
	float:left;
	width:128px;
	height:130px;
	line-height:130px;
	text-align:center;
	background:#eee;
	border:1px solid #e1e1e1;
}
</style>
</head>

<body>
<h1>Xslider实现左右切换的分页效果</h1>
<div class="productshow">
    <div class="scrollcontainer">
        <div class="scrollwraper">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
                <li>13</li>
                <li>14</li>
                <li>15</li>
                <li>16</li>
                <li>17</li>
                <li>18</li>
                <li>19</li>
                <li>20</li>
                <li>21</li>
                <li>22</li>
                <li>23</li>
                <li>24</li>
                <li>25</li>
                <li>26</li>
                <li>27</li>
            </ul>
        </div>
    </div>
    <a class="abtn aleft" href="#left">左移</a>
    <a class="abtn aright" href="#right">右移</a>
</div>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/Xslider.js"></script>
<script type="text/javascript">
$(function(){
	//左右切换分页效果的实现；
	var totalnum=$(".productshow li").length,
		numperpage=10,
		pages=Math.ceil(totalnum/numperpage),
		temp=$(".scrollwraper ul");
	
	function app(){
		temp=$("<ul />").append(temp.find("li:gt("+(numperpage-1)+")")).appendTo($(".scrollwraper"));
		if(temp.find("li").length>numperpage){
			app();
		}
	}
	app();
	
	$(".productshow").Xslider({
		scrollobj:".scrollwraper",
		unitdisplayed:1,
		numtoMove:1,
		viewedSize:650,
		unitlen:650,
		scrollobjSize:650*pages
	});
	
	$("a").focus(function(){this.blur();});
})
</script>
</body>
</html>